<template>
  <div
    class="formula-wrap"
    :class="[data.name, data.class ,{'click':is_cursor(data.value)==1}]"
    @click.stop="addcursor"
  >
    <span
        class="enterdiv mixed"
        :class="{ active: data.value.mixed.find(a => a.name === 'cursor') }"
        @click.stop="addcursor($event,-1,'mixed')"
    >
      <span
          v-for="(value2,key2) in data.value.mixed"
          :key="key2"
          :class="value2.name"
          @click.stop="addcursor($event,key2,'mixed')"
      >{{ value2.value }}</span>
    </span>
    <div class="formula-content">
      <span
        class="enterdiv up"
        :class="{ active: data.value.up.find(a => a.name === 'cursor') }"
        @click.stop="addcursor($event,-1,'up')"
      >
        <span
          v-for="(value2,key2) in data.value.up"
          :key="key2"
          :class="value2.name"
          @click.stop="addcursor($event,key2,'up')"
        >{{ value2.value }}</span>
      </span>
      <span class="fraction-line"></span>
      <span
        class="enterdiv down"
        :class="{ active: data.value.down.find(a => a.name === 'cursor') }"
        @click.stop="addcursor($event,-1,'down')"
      >
        <span
          v-for="(value2,key2) in data.value.down"
          :key="key2"
          class="k-board"
          :class="value2.name"
          @click.stop="addcursor($event,key2,'down')"
        >{{ value2.value }}</span>
      </span>
    </div>
  </div>
</template>

<script>
export default {
    name: 'FormulaView',
    props: {
        data: {
            type: Object,
            default () {
                return {
                    value: {
                        up: [],
                        down: [],
                        mixed: [],
                    },
                };
            },
        },
    },
    methods: {
        // 光标是否在公式里
        is_cursor: function (value) {
            let flag = value.up.findIndex((value, index, arr) => {
                return value.name === 'cursor';
            });
            if (flag === -1) {
                flag = value.down.findIndex((value, index, arr) => {
                    return value.name === 'cursor';
                });
            }
            return flag !== -1 ? 1 : 0;
        },
        addcursor () {
            this.$emit('emit-click', {
                event: arguments[0],
                idx: arguments[1] || -1,
                site: arguments[2] || -1,
            });
        },
    },
};
</script>

<style scoped lang="scss">

  .formula-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .enterdiv {
    min-width: 70px;
    min-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #EFEFEF;
    background-color: #EFEFEF;
    border-radius: 4px;
    &.mixed {
      display: none;
      margin-right: 16px;
    }
    &.active {
      background: #fff;
      border-color: #48A6FF;
    }
  }
  .fraction-line {
    display: none;
  }
  .fraction {
    .mixed {
      display: flex;
    }
    .fraction-line {
      display: block;
      margin: 8px 0;
      border: 2px solid #EFEFEF;
    }
  }

  .formula-content {
    box-sizing: border-box;
  }
  .aimsup {
    .formula-content {
      display: flex;
      padding-top: 20px;
    }
    .down {
      min-width: 45px;
      min-height: 45px;
      position: relative;
      top: -25px;
      margin-left: 5px;
    }
    .up {
      min-width: 60px;
    }
  }

  .aimsub {
    .formula-content {
      display: flex;
      padding-bottom: 20px;
    }
    .down {
      min-width: 45px;
      min-height: 45px;
      position: relative;
      bottom: -25px;
      margin-left: 5px;
    }
    .up {
      min-width: 60px;
    }
  }

  .loop {
    background-color: transparent;
    .fraction-line {
      display: block;
      box-sizing: border-box;
      width: 3px;
      margin: 0 0 8px 21px;
      border: 3px solid #4C565E;
    }
    .down {
      min-width: 45px;
    }
    .up {
      display: none;
    }
  }
</style>
